import { Component, For } from 'solid-js';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import DownloadCard from '../../components/DownloadCard';
import { useDownloadsStore } from './store';

const Downloads: Component = () => {
  const { activeDownloads, completedDownloads } = useDownloadsStore();

  return (
    <div class="p-6 w-full h-full">
      <Tabs defaultValue="active" class="w-full">
        <TabsList>
          <TabsTrigger value="active">下载中 ({activeDownloads().length})</TabsTrigger>
          <TabsTrigger value="completed">已完成 ({completedDownloads().length})</TabsTrigger>
        </TabsList>
        <TabsContent value="active" class="mt-6">
          <div class="flex flex-col gap-4 pb-6">
            <For each={activeDownloads()}>
              {(download) => <DownloadCard download={download} />}
            </For>
          </div>
        </TabsContent>
        <TabsContent value="completed" class="mt-6">
          <div class="flex flex-col gap-4">
            <For each={completedDownloads()}>
              {(download) => <DownloadCard download={download} />}
            </For>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
};

export default Downloads;